<template>
  <NavBar />
  <div class="container">
    <div class="left-menu">
      <li v-for="(item, index) in page[0].children" :key="index" :class="{ active: activeIndex == index }"
        @click="switchMenu(item, index)">
        <span>{{ item.name }}</span>
      </li>
    </div>
    <div class="right-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnHome"
}
</script>

<script setup>
import { ref } from "vue"
import page from "../router/page/index.js"
import { useRouter } from 'vue-router'
import NavBar from "../components/nav_bar.vue"

const router = useRouter()

const activeIndex = ref(0)

const switchMenu = (item, index) => {
  activeIndex.value = index
  router.push({ name: item.name })
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 90vh;
  display: flex;
  overflow-y: auto;
}

.left-menu {
  width: 25vw;
  background-color: #f9f9f9;
}

li {
  list-style: none;
  line-height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 13px;
}

li > span{
  margin-left: 3rem;
}

li.active {
  border-right: 4px solid #ffcf3f;
  /* background: #ffcf3f33; */
  background: #fff;
  color: #ffcf3f;
}

.right-content {
  padding: 0 2.5rem;
  width: 100%;
  overflow-y: auto;
}
</style>